<template>
  <!--非响应式操作-->
  <h1>{{ msgs }}</h1>
  <!--响应式操作-->
  <h2>{{ msg }}</h2>
  <h3>数量增加{{ count }}</h3>
  <!--点击转换的时候进行翻转-->
  <button @click="btn">点击翻转字符串</button>
</template>

<script setup>
import { onMounted, ref } from 'vue';

onMounted(() => {
  // btn()
})
var count = 0
// 在什么情况下加响应式 当你的数据需要在页面发生变化的时候 做响应式 是在组合api中操作
// ref 创建响应式数据  赋值的时候使用  .value 来赋值
let msg = ref('Hello World')
let msgs = 'Hello World'

const btn = () => {
  //非响应式的操作
  msgs = msgs.split('').reverse().join('')
  console.log(msgs.split('').reverse().join(''))
  //响应式的操作
  msg.value = msg.value.split('').reverse().join('')
  console.log(msg.value.split('').reverse().join(''))
  //对数据操作
  //count.value++
  count++
}



</script>
<style scoped>

</style>
